<template>
  <div>
    <el-row :gutter="30">
      <el-col :span="6">
        <el-card>
          <div class="card-icon-container">
            <i class="iconfont el-icon-s-custom" style="color: #40c9c6"/>
          </div>
          <div class="card-desc">
            <div class="card-title">访问量</div>
            <div class="card-count">9999999999</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <div class="card-icon-container">
            <i class="iconfont el-icon-user-solid" style="color: #34bfa3"/>
          </div>
          <div class="card-desc">
            <div class="card-title">用户量</div>
            <div class="card-count">9999999999</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <div class="card-icon-container">
            <i class="iconfont el-icon-notebook-1" style="color: #f4516c"/>
          </div>
          <div class="card-desc">
            <div class="card-title">文章量</div>
            <div class="card-count">9999999999</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <div class="card-icon-container">
            <i class="iconfont el-icon-chat-line-round" style="color: #36a3f7"/>
          </div>
          <div class="card-desc">
            <div class="card-title">留言量</div>
            <div class="card-count">9999999999</div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-card style="margin-top: 1.25rem">
      <div class="e-title">一周访问量</div>
      <div style="height: 350px">
        <v-chart :options="viewCount" v-loading="loading" />
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  data () {
    return {
      viewCount: {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          }
        },
        color: ['#3888fa'],
        legend: {
          data: ['访问量']
        },
        grid: {
          left: '0%',
          right: '0%',
          bottom: '0%',
          top: '10%',
          containLabel: true
        },
        xAxis: {
          data: [],
          axisLine: {
            lineStyle: {
              color: '#666'
            }
          }
        },
        yAxis: {
          axisLine: {
            lineStyle: {
              color: '#048CCE'
            }
          }
        },
        series: [
          {
            name: '访问量',
            type: 'line',
            data: [],
            smooth: true
          }
        ]
      },
    }
  },
  methods: {

  }
}
</script>

<style>
.card-icon-container {
  display: inline-block;
  font-size: 4rem;
}
.card-desc {
  font-weight: bold;
  float: right;
}
.card-title {
  margin-top: 0.5rem;
  line-height: 18px;
  color: rgba(0, 0, 0, 0.45);
  font-size: 1rem;
}
.card-count {
  margin-top: 1rem;
  color: #666;
  font-size: 1.25rem;
}
.e-title {
  font-size: 13px;
  color: #202a34;
  font-weight: 700;
}
</style>
